<template>
	<view class="outer">
		<scroll-view class="left" scroll-y>
			<view v-for="(item,index) in categoryList" :key="item.cat_id" class="cat_item" :class="currentIndex===index? 'active_item':''" @click="chose_cat(index,item.cat_id)">
				{{item.cat_name}}
			</view>
		</scroll-view>
		<view class="right">
			{{rightId}}
		</view>
	</view>
</template>

<script>
	import {get_category,get_category_img} from 'request/api.js'
	export default {
		data() {
			return {
				categoryList:[],
				currentIndex:0,
				rightId:0
			}
		},
		onLoad() {
			
			get_category(null).then(res=>{
				this.categoryList=res.data.message;
			})
			
		},
		methods: {
			chose_cat(index,id){
				this.currentIndex=index;
				this.rightId=index;
			},
			
		}
	}
</script>

<style>
	page{height: 100%;}
	.outer{height: 100%;display: flex;flex-direction: row;}
	.left{width: 200rpx;height: 100%;border-right: solid 1px #eee}
	.cat_item{height: 120rpx;line-height: 120rpx;width: 100%;text-align: center;}
	.active_item{background-color: red;color: white;}
</style>
